<template>
  <div class="edit-order">
    <header-buttons :model="model" @load="getModel" />
    <div class="order-from">
      <order-info :model="model" />
      <reply-info :model="model" />
    </div>
  </div>
</template>

<script>
import OrderInfo from "./modules/OrderInfo.vue";
import ReplyInfo from "./modules/ReplyInfo.vue";
import HeaderButtons from "./modules/HeaderButtons.vue";

import { findById } from "@/api/workOrder/allWorkOrders.js";

export default {
  name: "EditWorkOrder",
  components: {
    OrderInfo,
    ReplyInfo,
    HeaderButtons
  },
  data() {
    return {
      model: {}
    };
  },
  created() {
    this.getModel();
  },
  methods: {
    getModel() {
      const id = this.$route.params?.id || "";
      if (!id) return;
      findById(id).then(res => {
        this.model = res.data.data;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.edit-order {
  height: 100%;

  .order-from {
    width: 100%;
    height: calc(100% - 80px);
    display: flex;
    gap: 20px;
  }
}

</style>